/*
 * 登录主体组件
 */
<script>
    export default 
    {
        name: "ys-login-main",
        props: 
        {
            /*
             * 登录类型
             */
            type: {
                type: String,
                default: "password" //password 密码登录登录 smscode 短信验证码登录
            },
            /*
             * 忘了密码地址
             */            
            forgetUrl: {
                type: String,
                default: ""
            },
            /*
             * 注册地址
             */            
            registUrl: {
                type: String,
                default: ""
            }
        },
        data() 
        {
            return {
                mobile : "",
                password : "",
                times: 0
            }
        },
        methods: 
        {
            /*
             * 密码登陆
             * @param    string     user_var    用户标识
             * @param    string     password    用户密码
             * @return void
             */
            passwordLogin: function(user_var, password)
            {
                var query = `
                    mutation login ($user_var: String,$password:String){
                      login(user_var: $user_var, password: $password){
                        error_code
                        error_msg
                        access_token
                        uid
                        username
                        nickname
                        face
                      }
                    }            
                `;
                this.graphql.query({query:query, variables: {"user_var" : user_var, "password" : password}}).then(function (res) {
                    console.log(JSON.stringify(res));
                    console.log(res.login.access_token);
                    if (res.login.error_code == 0) {
                        uni.showToast({
                            title:'登陆成功',
                            icon:'success'
                        })
                        uni.redirectTo({
                            url: '/pages/ucenter/ucenter'
                        });                                                
                    } else {
                        uni.showToast({
                            title:res.login.error_msg,
                            icon:'none'
                        })
                    }
                    //do something
                }).catch((error) => {
                    console.log(error);
                });                  
            }
        }
    }
</script>

<template name="ys-login-main">
    <view class="ys-login-main" v-if="type==='password'">
        <view class="mobile-input input-box">
            <view class="icon"></view>
            <input v-model="mobile" type="number" placeholder="请输入手机号" class="mobile"></input>
        </view>
        <view class="password-input input-box">
            <view class="icon"></view>
            <input v-model="password" type="text" password="true" placeholder="请输入密码" class="password"></input>
        </view>
        <button class="login-btn big-btn" @tap="passwordLogin(mobile, password)">登录</button>
        <view class="navigator">
            <navigator class="regist" url="/pages/register/register">
                <text>立即注册</text>
            </navigator>               
            <navigator class="resetpwd" url="/pages/resetpwd/resetpwd">
                <text>忘记密码?</text>
            </navigator>
        </view>
    </view>
    <view class="ys-login-main" v-else-if="type==='smscode'">
        <input type="number" placeholder="请输入您的手机号" class="mobile" @input="inputMobile"></input>
        <view class="input-line">
            <input type="text" placeholder="请输入验证码" class="smscode" @input="inputSmscode"></input>
            <button type="button" class="code-btn" @tap="getSmscode">{{times ? times +'秒重新发送':'获取验证码'}}</button>
        </view>
        <button class="login-btn big-btn" @tap="submitLogin">登录</button>        
    </view>    
</template>

<style lang="scss">
    .ys-login-main {
        display: flex;
        flex-direction: column;
        width: 620upx;
        input {
            width: 100%;
            color: #999999;
            height: 150upx;
            border-bottom: 0.5upx solid #ebebeb;
        }
        .input-box {
            display: flex;
            align-items: center;
            width: 100%;
            .icon {
                width: 30upx;
                height: 48upx;
                margin-right: 30upx;
            }
        }
        .mobile-input {
            .icon {
                background: url("~@/static/images/icons/login-mobile.png") no-repeat;
                background-size: 24upx 38.4upx;
            }
        }
        .password-input {
            .icon {
                background: url("~@/static/images/icons/login-password.png") no-repeat;
                background-size: 24upx 38.4upx;
            }
        }
        .login-btn {
            margin-top: 60upx;
        }
        .navigator {
            display: flex;
            font-size: 0.8em;
            margin-top: 20upx;
            justify-content: space-between;
        }
     }
</style>
